<template>
  <basic-container>
    <div class="avue-crud">
      <el-row>
        <el-col :span="5">
          <el-tag style="width:100%;margin-bottom:5px;">
            商品类目可配置规格模板分类列表
          </el-tag>
          <div class="avue-crud__menu">
            <div class="avue-crud__left">
            </div>
            <div class="avue-crud__right">
              <el-tooltip class="item"
                          effect="dark"
                          content="刷新"
                          placement="top">
                <el-button icon="el-icon-refresh"
                           class="is-circle"
                           @click="getList()">
                </el-button>
              </el-tooltip>
            </div>
          </div>
          <el-table border
                    v-loading="loading"
                    :data="goodsCategorys"
                    row-key="id"
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildrens'}">
            <el-table-column prop="name"
                             label="商品类目列表"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作"
                             align="center"
                             width="90"
                             class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           icon="el-icon-menu"
                           @click="checkCategory(scope.row)"
                           v-if="(permissions.sys_label_all || permissions.goods_spec_group_add) && scope.row.hierarchy == 3">规格模板
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="7"
                :offset="1">
          <el-tag style="width:100%;margin-bottom:5px;">
            {{checkCategoryForm.name}} 分类规格模板分组列表
          </el-tag>
          <avue-crud ref="groupCrud"
                     :option="groupTableOption"
                     v-model="groupForm"
                     :data="groupList"
                     :table-loading="groupListLoading"
                     @refresh-change="getGroupList"
                     @row-update="groupUpdate"
                     @row-save="groupCreate">
            <template slot="menuLeft">
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_add"
                         class="filter-item"
                         type="primary"
                         icon="el-icon-plus"
                         @click="handleGroupAdd">添加 {{checkCategoryForm.name}} 规格分组
              </el-button>
            </template>
            <template slot="menu"
                      slot-scope="scope">
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_edit"
                         type="text"
                         size="small"
                         icon="el-icon-edit"
                         @click="$refs.groupCrud.rowEdit(scope.row)">编辑
              </el-button>
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_del"
                         type="text"
                         size="small"
                         icon="el-icon-delete"
                         @click="handleGroupDelete(scope.row)">删除
              </el-button>
              <el-button size="small"
                         type="text"
                         icon="el-icon-menu"
                         @click="checkGroup(scope.row)"
                         v-if="permissions.sys_label_all || permissions.goods_spec_group_add">分组属性
              </el-button>
            </template>
          </avue-crud>
        </el-col>
        <el-col :span="10"
                :offset="1">
          <el-tag style="width:100%;margin-bottom:5px;">
            {{checkGroupForm.label}} 分组规格模板属性列表
          </el-tag>
          <avue-crud ref="groupSpecCrud"
                     :option="groupSpecTableOption"
                     v-model="groupSpecForm"
                     :data="groupSpecList"
                     :table-loading="groupSpecListLoading"
                     @refresh-change="getGroupSpecList"
                     @row-update="groupSpecUpdate"
                     @row-save="groupSpecCreate">
            <template slot="menuLeft">
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_add"
                         class="filter-item"
                         type="primary"
                         icon="el-icon-plus"
                         @click="handleGroupSpecAdd">添加 {{checkGroupForm.label}} 分组属性
              </el-button>
            </template>
            <template slot="menu"
                      slot-scope="scope">
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_edit"
                         type="text"
                         size="small"
                         icon="el-icon-edit"
                         @click="$refs.groupSpecCrud.rowEdit(scope.row)">编辑
              </el-button>
              <el-button v-if="permissions.sys_label_all || permissions.goods_spec_group_del"
                         type="text"
                         size="small"
                         icon="el-icon-delete"
                         @click="handleGroupSpecDelete(scope.row)">删除
              </el-button>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
    </div>
  </basic-container>
</template>

<script>
import { groupTableOption, groupSpecTableOption } from '@/const/crud/goods/group'
import { mapGetters } from 'vuex'
import { fetchTree } from "@/api/admin/sys-tree"
import { fetchList, addObj, putObj, delObj } from "@/api/admin/sys-label"
import * as Spec from "@/api/goods/spec"

export default {
  name: 'goodsGroupSpec',
  data () {
    return {
      // =============
      // 商品类目分类列表信息
      // =============
      loading: false,
      goodsCategorys: [],
      // =============
      // 商品规格模板分组信息
      // =============
      checkCategoryForm: {},
      groupForm: {},
      groupList: [],
      groupListLoading: false,
      groupTableOption,
      // =============
      // 商品规格模板分组属性信息
      // =============
      checkGroupForm: {},
      groupSpecForm: {},
      groupSpecList: [],
      groupSpecListLoading: false,
      groupSpecTableOption
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      this.loading = true
      fetchTree({ treeType: 3, develop: '1' }).then(response => {
        this.goodsCategorys = response.data.data || [];
        this.loading = false
      })
    },
    getGroupList () {
      this.groupListLoading = true
      fetchList({ labelType: 1, extra: this.checkCategoryForm['id'] }).then(resp => {
        this.groupList = resp.data.data || []
        this.groupListLoading = false
      }).catch(() => {
        this.groupListLoading = false
      })
    },
    getGroupSpecList () {
      if (!this.checkGroupForm['id']) return
      this.groupSpecListLoading = true
      Spec.fetchList({ groupId: this.checkGroupForm['id'] }).then(resp => {
        this.groupSpecList = resp.data.data || []
        this.groupSpecListLoading = false
      }).catch(() => {
        this.groupSpecListLoading = false
      })
    },
    groupCreate (row, done, loading) {
      addObj(Object.assign(this.groupForm, { labelType: 1, extra: this.checkCategoryForm['id'] })).then((resp) => {
        this.getGroupList()
        done()
        this.$notify.success("添加商品规格模板分组成功")
      }).catch(() => {
        loading()
      })
    },
    groupSpecCreate (row, done, loading) {
      Spec.addObj(Object.assign(this.groupSpecForm, { groupId: this.checkGroupForm['id'] })).then((resp) => {
        this.getGroupSpecList()
        done()
        this.$notify.success("添加商品规格模板分组属性成功")
      }).catch(() => {
        loading()
      })
    },
    groupUpdate (row, index, done, loading) {
      putObj(this.groupForm).then((resp) => {
        this.getGroupList()
        done()
        this.$notify.success("修改商品规格模板分组成功")
      }).catch(() => {
        loading()
      })
    },
    groupSpecUpdate (row, index, done, loading) {
      Spec.putObj(this.groupSpecForm).then((resp) => {
        this.getGroupSpecList()
        done()
        this.$notify.success("修改商品规格模板分组属性成功")
      }).catch(() => {
        loading()
      })
    },
    checkCategory (row) {
      // 分组信息
      this.checkCategoryForm = row
      this.groupForm = {}
      this.groupList = []
      this.getGroupList()
      this.checkGroup({})
    },
    checkGroup (row) {
      // 分组属性信息
      this.checkGroupForm = row
      this.groupSpecForm = {}
      this.groupSpecList = []
      this.getGroupSpecList()
    },
    handleGroupAdd () {
      if (!this.checkCategoryForm['id']) return this.$message.warning("请选择分类")
      this.$refs['groupCrud']['rowAdd']()
    },
    handleGroupSpecAdd () {
      if (!this.checkGroupForm['id']) return this.$message.warning("请选择分组")
      this.$refs['groupSpecCrud']['rowAdd']()
    },
    handleGroupDelete (row) {
      this.$confirm('是否确认删除名称为"' + row.label + '"' + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delObj(row.id)
      }).then(() => {
        this.$message.success("删除分组成功")
        this.getGroupList()
        this.checkGroup({})
      }).catch(() => { })
    },
    handleGroupSpecDelete (row) {
      this.$confirm('是否确认删除名称为"' + row.label + '"' + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return Spec.delObj(row.id)
      }).then(() => {
        this.$message.success("删除分组属性成功")
        this.getGroupSpecList()
      }).catch(() => { })
    }
  }
}
</script>